<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas" width="500" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')

    ctx.beginPath()
    // 绘制点
    ctx.arc(canvas.width / 2, canvas.height / 2, 6, 0, Math.PI * 2, true)
    ctx.fillStyle = 'red'
    ctx.fill()

    // 绘制线
    ctx.beginPath()
    ctx.moveTo(100, 100)
    ctx.lineTo(200, 200)
    ctx.lineTo(300, 300)
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = 2
    ctx.stroke()

    // 绘制面
    ctx.beginPath()
    ctx.rect(100, 100, 200, 100)
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
    ctx.strokeStyle = 'red'
    ctx.fill()
    ctx.stroke()
</script>
</body>
</html>